<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Simplify</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var path;

        var textItem = new PointText({
            content: 'Click and drag to draw a line.',
            point: new Point(20, 30),
            fillColor: 'black',
        });

        function onMouseDown(event) {
            // If we produced a path before, deselect it:
            if (path) {
                path.selected = false;
            }

            // Create a new path and set its stroke color to black:
            path = new Path({
                segments: [event.point],
                strokeColor: 'black',
                // Select the path, so we can see its segment points:
                fullySelected: true
            });
        }

        // While the user drags the mouse, points are added to the path
        // at the position of the mouse:
        function onMouseDrag(event) {
            path.add(event.point);

            // Update the content of the text item to show how many
            // segments it has:
            textItem.content = 'Segment count: ' + path.segments.length;
        }

        // When the mouse is released, we simplify the path:
        function onMouseUp(event) {
            var segmentCount = path.segments.length;

            // When the mouse is released, simplify it:
            path.simplify(10);

            // Select the path, so we can see its segments:
            path.fullySelected = true;

            var newSegmentCount = path.segments.length;
            var difference = segmentCount - newSegmentCount;
            var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
            textItem.content = difference + ' of the ' + segmentCount + ' segments were removed. Saving ' + percentage + '%';

        }
    </script>
</head>
<body>
    <canvas id="canvas" resize></canvas>
</body>
</html>
